<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">

        <el-form-item style="margin-right: 15px;">
          <el-input v-model="queryParams.name" placeholder="艺术分类"></el-input>
        </el-form-item>




        <el-form-item>
          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-button @click="add()">新增</el-button>
        </el-form-item>


      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="articlePageData" style="width: 100%" border>
        <el-table-column prop="name" label="文章标题" align="center" />
        <el-table-column label="文章类型">
          <template #default="scope">
            <span v-if="scope.row.plateType === 1">艺术机构文章</span>
            <span v-if="scope.row.plateType === 2">艺术家文章</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" />
        <el-table-column label="标签" prop="name" />
        <el-table-column label="封面图">
          <template #default="scope">
            <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
              style="width: 100px;height: 100px;">
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template #default="scope">
            <el-button v-if="scope.row.value !== null && scope.row.value !== ''"
              :type="scope.row.isIndex === 1 ? 'danger' : 'success'" size="small" @click="saveIndex(scope.row)">
              {{ scope.row.isIndex === 1 ? '取消首页文章' : '设置首页文章' }}
            </el-button>
            <el-button v-if="scope.row.value !== null && scope.row.value !== ''"
              :type="scope.row.isRecommend === 1 ? 'danger' : 'success'" size="small" @click="saveRecommend(scope.row)">
              {{ scope.row.isRecommend === 1 ? '取消推荐文章' : '设置推荐文章' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <!-- 修改弹框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="30%">
      <el-form :model="editForm" label-width="160px">
        <el-form-item label="艺术分类名称">
          <el-input v-model="editForm.name" />
        </el-form-item>

        <el-form-item label="排序">
          <el-input-number v-model="<number>editForm.sort" :min="1" :max="999" />
        </el-form-item>


      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="editItem">
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import ArticleAPI from "@/api/article";
import { ArticleQuery, ArticlePageResult, ArticleForm, ArticlePageVO, Article } from "@/api/article/model"



defineOptions({
  name: "Article",
  inheritAttrs: false,
});



const queryFormRef = ref(ElForm);


const editForm = reactive<ArticleForm>({

});

const loading = ref(false);
const editDialogVisible = ref(false);


const total = ref(0);
// 搜索参数
const queryParams = reactive<ArticleQuery>({
  pageNum: 1,
  pageSize: 10,
  name: '',
});

const articlePageData = ref<ArticlePageVO[]>();

const dialog = reactive({
  title: "",
  visible: false,
});

/**
 * 打开新增弹框
 */
function add() {
  editForm.id = null
  editForm.createUser = null;
  editForm.createTime = null;
  editForm.updateTime = null;
  editForm.sort = null;
  dialog.visible = true;
}
/**
 * 打开修改弹框
 * @param row 
 */
function handleEdit(row: Article) {
  editForm.id = row.id;
  editForm.createUser = row.createUser;
  editForm.createTime = row.createTime;
  editForm.updateTime = row.updateTime
  editForm.sort = row.sort
  dialog.visible = true;
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  ArticleAPI.getPage(queryParams)
    .then((data) => {
      articlePageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
/**
 * 保存修改
 */
function editItem() {
  // 当id存在时执行修改操作，否则执行新增操作
  if (editForm.id) {
    ArticleAPI.update(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  } else {
    ArticleAPI.add(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  }

}

function saveIndex(row: Article) {
  if (row.isIndex === 1) {
    row.isIndex = 0
  } else {
    row.isIndex = 1
  }
  ArticleAPI.update(row).then(() => {
    handleQuery();
  })
}

function saveRecommend(row: Article) {
  if (row.isRecommend === 1) {
    row.isRecommend = 0
  } else {
    row.isRecommend = 1
  }
  ArticleAPI.update(row).then(() => {
    handleQuery();
  })
}

function handleDelete(row: Article) {
  // 执行删除操作

}









onMounted(() => {
  handleQuery();
});
</script>
